<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=UTF-8");
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
%>
<html>
<head>
<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />	
		<title>car2go，发起接力</title>
		<link rel="stylesheet" href="<%=path%>/css/bootstrap.min.css" />
		<link rel="stylesheet" href="<%=path%>/css/public.css" />
		<link rel="stylesheet" href="<%=path%>/css/validationEngine.jquery.css" />
		<script type="text/javascript" src="<%=path%>/js/jquery-2.2.3.min.js" ></script>
	    <script type="text/javascript" src="<%=path%>/js/bootstrap.min.js" ></script>
	    
</head>
<body class="sy_bd">
	<div class="allhead">
		<div class="bd">
			<div class="city2">
				<img src="<%=path%>/img/city2.png" alt="" /><img src="<%=path%>/img/city2.png" alt="" />
			</div>
		</div>
		<div class="paodao2"><img src="<%=path%>/img/paodao2.png" alt="" class="pic-pd"/></div>
		<div class="car2"><img src="<%=path%>/img/car.png" alt="" />
			<img src="<%=path%>/img/luntai.png" alt="" class="lunt lunt-left"/>
			<img src="<%=path%>/img/luntai.png" alt="" class="lunt lunt-right"/>
			
		</div>
	</div>
	<form action="<%=path%>/relay/addRelay" method="post" id="fo" enctype="multipart/form-data">
	  		<div >
			    <input type="hidden" value="${opid }" name="sponsorOpenid"/>
			    <input type="hidden" value="${nickName }" name="sponsor"/>
			     <input type="hidden" value="${relayNo }" name="relayNo"/>
	         </div>   
			<div class="put_bd margin_top-20px">
				<div class="title_pic"><img src="<%=path%>/img/w2.png" alt="" /></div>
				<div class="bd timer" name="createTime"></div>
			</div>
			<div class="put_bd margin_top-20px">
				<div class="title_pic"><img src="<%=path%>/img/w13.png" alt="" style='width:49%;padding-left:1.5%;'/></div>
				<div class="bd" style="text-indent:1%;" >
				<input type="text" name="sponsorNum" id="area"  class="validate[required,minSize[11],maxSize[11],custom[phone]]" showOneMessage="无效的注册手机号" data-errormessage="无效的注册手机号" data-prompt-position="bottomLeft"/>
				</div>
			</div>
			<%-- <div class="put_bd margin_top-20px">
				<div class="title_pic"><img src="<%=path%>/img/w3.png" alt="" /></div>
				<div class="bd" style="text-indent: 1%;" >
					<input type="text" name="relayAddress" id="area" value=""  />
				    <span class="spp" id="butta"><img src="<%=path%>/img/icon2.png" alt="" /></span>
				</div>
			</div> --%>
			<div class="put_bd margin_top-20px">
				<div class="title_pic"><img src="<%=path%>/img/w1.png" alt="" /></div>
				<div class="bd xx" style="border:0;padding-top:2px;width:68%;margin-top:0;margin-bottom: 0;" ></div>
			</div>
			<div class="filepic">
				<!-- <p>请上传照片，开始接龙</p> -->
				<div style="margin-bottom: 60px;">						
						<div style="position: relative;">
							 <a href="#" class="a-upload" id="im1">
								<input id="file_upload1" type="file" name="photo"  />
								<div class="image_container">
									<img id="preview1"  >
								</div>
								<div class="words">车牌信息</div>          
							</a> 
							<input type="hidden" id="picPath1" name="photo1" class="validate[groupRequired[grp]]" showOneMessage="请上传照片" data-errormessage="请上传照片" data-prompt-position="bottomLeft"/>
						</div>	    
											

						<div style="position: relative;">	
	
							<a href="#" class="a-upload" id="im2">
								<input id="file_upload2" type="file" name="photo"    /> 
								<div class="image_container">
									<img id="preview2"  >
								</div>
								<div class="words">停车位置</div>         
							</a>
							<input type="hidden" id="picPath2" name="photo2" class="validate[groupRequired[grp]]" showOneMessage="请上传照片" data-errormessage="请上传照片" data-prompt-position="bottomLeft"/>
						</div>
	
						<div style="position: relative;">		
							<a href="#" class="a-upload" id="im3">	
								<input id="file_upload3" type="file"  name="photo"  class="validate[groupRequired[grp]]" showOneMessage="请上传照片" data-errormessage="请上传照片" data-prompt-position="bottomLeft" /> 
								<div class="image_container">
								    <img id="preview3"  >
								</div>
								<div class="words">标志景物</div>
							</a>
							<input type="hidden" id="picPath3" name="photo3" />
						</div>

						<div style="display: none;" class="bigpic">
							<div style="position: fixed;background: #000; z-index: 999; width:100%; height:100%; top:0; left:0; text-align: center; display: table;">
							    <span style=" display:table-cell;vertical-align:middle;">
							    	<img src="" alt="" style="width:100%;" class="big-img"/>
							    </span>
							</div>
						</div>                                      
				</div>	
				
			</div>
			<div class="put_bd" style="color:#FFF;float:left;" >
			<p>1.至少上传一张包含车牌的照片</p>
			<p>2.建议上传停车位置图片包含周围景物</p>	
			<p>3.成功接龙后，发起和接收方有即行券奖励</p>			
			</div>
			<div class="anniu">
				<a href="javascript:void(0);" onclick="sub();"><img src="<%=path%>/img/jl-btn.png"  alt="" /></a>
			</div>
		</form>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F9f0bdc1f02411bc3d439410a5795937"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=F9f0bdc1f02411bc3d439410a5795937&v=1.0"></script>
		<script type="text/javascript" src="<%=path%>/js/pic.js" ></script>	
		<script type="text/javascript" src="<%=path%>/js/lrz.bundle.js" ></script>
		<script type="text/javascript" src="<%=path%>/js/1.chunk.js" ></script>
		<script type="text/javascript" src="<%=path%>/js/2.chunk.js" ></script>
		<script type="text/javascript" src="<%=path%>/js/lrz.all.bundle.js" ></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
		<script type="text/javascript"	src="<%=path%>/js/jquery.validationEngine.js"></script>
		<script type="text/javascript"	src="<%=path%>/js/jquery.validationEngine-zh_CN.js"></script>	
		<script>
		
		
		var area = '';
			var geolocation = new BMap.Geolocation();
			var geoc = new BMap.Geocoder();
			//根据浏览器获取地里位置
				geolocation.getCurrentPosition(function(r){
					if (this.getStatus() == BMAP_STATUS_SUCCESS) {
			//解析地理位置		
						
						var pt =  new BMap.Point(r.point.lng,r.point.lat);
						geoc.getLocation(pt,function(rs){											
							var addComp = rs.addressComponents;
							area = addComp.province  + addComp.city + addComp.district +addComp.street + addComp.streetNumber;
						})
					}
				})

				
					$("#butta").click(function(){
						
						(area) ?$("#area").val(area):$("#area").val("点击获取地理位置");

					})
					/* setTimeout(function(){$("#butta").triggerHandler("click")},500); */
				for(var i=1;i<=5;i++){
					setTimeout(function(){$("#butta").triggerHandler("click")},200*i);
				}


		$(document).ready(function(){			
			
			$("#fo").validationEngine({
			  maxErrorsPerField: 1
			  });
		 	Date.prototype.pattern=function(fmt) {           
                var o = {           
                    "M+" : this.getMonth()+1, //月份           
                    "d+" : this.getDate(), //日           
                    "h+" : this.getHours()%24 == 0 ? 24 : this.getHours()%24, //小时           
                    "H+" : this.getHours(), //小时           
                    "m+" : this.getMinutes(), //分           
                    "s+" : this.getSeconds(), //秒           
                    "q+" : Math.floor((this.getMonth()+3)/3), //季度           
                    "S" : this.getMilliseconds() //毫秒           
                };           
                var week = {           
                    "0" : "/u65e5",           
                    "1" : "/u4e00",           
                    "2" : "/u4e8c",           
                    "3" : "/u4e09",           
                    "4" : "/u56db",           
                    "5" : "/u4e94",           
                    "6" : "/u516d"          
                };           
                if(/(y+)/.test(fmt)){           
                    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));           
                }           
                if(/(E+)/.test(fmt)){           
                    fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);           
                }           
                for(var k in o){           
                    if(new RegExp("("+ k +")").test(fmt)){           
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));           
                    }           
                }           
                return fmt;           
            }         
            var t = new Date(); 
             var x = t.pattern("yyyy-MM-dd hh:mm:ss")            
            $(".timer").text(x);
		});
		    $(window).load(function() {
				var cityHeight=$('.allhead .bd .city2 img').height()/6*5;
				$('.allhead .bd').height(cityHeight);
				var pdHeight=$('.allhead .paodao2 img').height();
				$('.allhead .paodao2').height(pdHeight);
				var ulWidth=$('.front-img li').width();
				$('.front-img li').height(ulWidth);
            });
		   function sub(){
			
			   var t1 = $("#file_upload1").val();
				 var t2 = $("#file_upload2").val();
				 var t3 = $("#file_upload3").val();
				
				 if(t1==null && t2==null && t3==null){
					 alert("照片中需要至少包括车牌号或车辆编号");
					 return false;
				 }
				 if(t1==""  && t2=="" && t3==""){
					 alert("照片中需要至少包括车牌号或车辆编号");
					 return false;
				 }
				   var p1 = $("#picPath1").val();
				   var p2 = $("#picPath2").val();
				   var p3 = $("#picPath3").val();
				   if(p1==null && p2==null && p3==null ){
					   alert("图片上传中");
					   return false;
				   }
					 if( p1=="" && p2=="" && p3==""){
					   alert("图片上传中");
					   return false;
				   }
				   if(t1!="" && p1==""){
					   alert("图片上传中");
					   return false;
				   }
				   if(t2!="" && p2==""){
					   alert("图片上传中");
					   return false;
				   }
				   if(t3!="" && p3==""){
					   alert("图片上传中");
					   return false;
				   }
				   if(p1!="" || p2!="" || p3!=""){
					   $("#fo").submit();  
				   }else{
					   alert("图片上传中");
					   return false;
				   }
				   
		   }
		   
		</script>
		<script type="text/javascript">
		var reNo = "${relayNo}";
		//微信jssdk config
		wx.config({
			debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId : '${appid}', // 必填，公众号的唯一标识
			timestamp : '${timestamp}', // 必填，生成签名的时间戳
			nonceStr : '${noncestr}', // 必填，生成签名的随机串
			signature : '${signature}',// 必填，签名，见附录1
			jsApiList : [ 'checkJsApi', //判断当前客户端版本是否支持指定JS接口
			'onMenuShareTimeline', //分享给好友
			'onMenuShareAppMessage', //分享到朋友圈
			'onMenuShareQQ', //分享到QQ
			'onMenuShareWeibo',//分享到微博
			'chooseImage',
			'uploadImage',
			'getLocation'
			]
		// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});
		wx.ready(function() { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
					wx.onMenuShareTimeline({ //分享到朋友圈的API  
								title : '接招！car2go接力go', // 分享标题
								link : 'http://run.xuanzhen-tech.com/car2go_wx/core/toRight.html', // 分享链接
								imgUrl : 'http://run.xuanzhen-tech.com/car2go_wx/img/car2.jpg', // 分享图标
								success : function() {
									// 用户确认分享后执行的回调函数
								},
								cancel : function() {
									// 用户取消分享后执行的回调函数
								}
							});
					wx.onMenuShareAppMessage({//分享到朋友 
								title : '接招！car2go接力go', // 分享标题
								desc : 'car2go接力go参与赢礼券', // 分享描述
								link : 'http://run.xuanzhen-tech.com/car2go_wx/core/toRight.html', // 分享链接
								imgUrl : 'http://run.xuanzhen-tech.com/car2go_wx/img/car2.jpg', // 分享图标
								type : 'link', // 分享类型,music、video或link，不填默认为link
								dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
								success : function() {
									// 用户确认分享后执行的回调函数
								},
								cancel : function() {
									// 用户取消分享后执行的回调函数
								}
							});
					/* wx.chooseImage({
						  count: 1, // 默认9
						  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						  success: function (res) {
						    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
						     $("ssw").attr("src",localIds[0].toString()); 
						  }
						}); */
					/* wx.uploadImage({
						  localId: localIds[0].toString(), //images.localId[i].toString(), 需要上传的图片的本地ID，由chooseImage接口获得
						  isShowProgressTips: 1, // 默认为1，显示进度提示
						  success: function (res) {
						    var serverId = res.serverId; // 返回图片的服务器端ID
						  }
						}); */
					wx.getLocation({
					    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					    success: function (res) {
					        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
					        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
					        var speed = res.speed; // 速度，以米/每秒计
					        var accuracy = res.accuracy; // 位置精度
					        
					    	var map = new BMap.Map("allmap");
							var point = new BMap.Point(longitude,latitude);
							map.centerAndZoom(point,12);
							var geoc = new BMap.Geocoder();    
						
							map.addEventListener("click", function(e){        
								var pt = e.point;
								geoc.getLocation(pt, function(rs){
									var addComp = rs.addressComponents;
									alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
								});        
							});
					    }
					});
					/* $('#filePicker').on('click', function () {
						  wx.chooseImage({
						    success: function (res) {
						      var localIds = res.localIds;
						      syncUpload(localIds);
						    }
						  });
						});
						var syncUpload = function(localIds){
						  var localId = localIds.pop();
						  wx.uploadImage({
						    localId: localId,
						    isShowProgressTips: 1,
						    success: function (res) {
						      var serverId = res.serverId; // 返回图片的服务器端ID
						      //其他对serverId做处理的代码
						      if(localIds.length > 0){
						        syncUpload(localIds);
						      }
						    }
						  });
						}; */
				});
		</script>
</body>
</html>